<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8"/>
    <title>临池书法</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="/public/stylesheets/animate.min.css"/>

    <link href="/public/javascripts/viewer/viewer.css" rel="stylesheet">

    <link rel="stylesheet/less" type="text/css" href="/public/stylesheets/styles-bootcss-test.less">

    <script src="/public/javascripts/less.min.js"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/public/javascripts/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/public/libs/bootstrap/js/bootstrap.min.js"></script>

    <script src="/public/javascripts/viewer/viewer.js"></script>

    <script>
        $(document).ready(function () {
            $('.images').viewer({
                title: false,
                navbar: false,
                url: 'data-original'
            });

            $('#btn-test').click(function () {
               $('.index-container').css('margin-left','100px');
            });

            $('.btn-comment,.comment>.comment-list>li').click(function () {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                if (!tid) {
                    tid = $this.attr('data-tid');
                    $('#at-rid').val($this.attr('data-rid'));
                    $('#at-uid').val($this.attr('data-uid'));
                }
                $('#at-tid').val(tid);
                var user = $this.attr('data-user');
                var top = $this.offset().top - 60;
                $('.con-dialog').removeClass("hide").offset({
                    top: top
                });
                if (!$('.con-dialog').hasClass('hide')) {
                    var left = $('.con-dialog').width() / 2;
                    $('.con-container').animate({
                        left: -left
                    }, 'fast');
                    $('.at-user').html(user);
                }
            });
            $('.comment-panel>.header>.close').click(function () {
                var left = $('.con-dialog').width() / 2;
                $('.con-dialog').addClass('hide');
                $('.con-container').animate({
                    left: 0
                }, 'fast');
                $('#at-tid').val('');
                $('#at-rid').val('');
                $('#at-uid').val('');
                $('#txtComment').text('');
            });
            $("#txtComment").keydown(function (event) {
                if (event.shiftKey && event.keyCode == 13) {
                } else if (event.keyCode == 13) {
                    var tid = $('#at-tid').val();
                    var rid = $('#at-rid').val();
                    var uid = $('#at-uid').val();
                    $.post('/' + tid + '/reply', {
                        tid: tid,
                        txt: $('#txtComment').text(),
                        rid: rid,
                        uid: uid
                    }, function (d) {
                        location.reload();
                    });
                    return false;
                }
            });

            $('.favorite').click(function (e) {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                $.ajax({
                    url: '/topic/' + tid + '/up',
                    method: 'POST',
                }).done(function (data) {
                    if (data.success) {
                        var currentCount = Number($this.next('.favorite-count').text().trim()) || 0;
                        if (data.action === 'up') {
                            $this.next('.favorite-count').text(currentCount + 1);
                            $this.addClass('favorited');
                        } else {
                            if (data.action === 'down') {
                                $this.next('.favorite-count').text(currentCount - 1);
                                $this.removeClass('favorited');
                            }
                        }
                    } else {
                        alert(data.message);
                    }
                }).fail(function (xhr) {
                    if (xhr.status === 403) {
                        alert('请先登录，登陆后即可点赞。');
                    }
                });
            });

        });
    </script>
</head>

<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top ">
    <div class="container shufa-nav">
        <a class="navbar-brand" href="/"><strong>墨香兰亭</strong></a>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/?tab=all">发现</a></li>
                <li><a href="/about">关于</a></li>
            </ul>

            <div class="pull-right nav-container-right">
                <img class="img-user" src="http://www.gravatar.com/avatar/d45130475b20154e427fa32cbd3d8b98?size=48">
            </div>
            <div class="pull-right shufa-btn-login">
                <a href="/topic/create">发布</a>
            </div>

        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<div class="container">


    <div class="user-dialog pull-right hide">
        <div class="user-panel">
            <div class="triangle"></div>
            <div class="body">
                <div class="user-info">
                    <div class="profile"><img
                            src="http://www.gravatar.com/avatar/d45130475b20154e427fa32cbd3d8b98?size=48"></div>
                    <p><span>crick萝卜</span></p>

                    <p><span>809905508@qq.com</span></p>
                </div>
                <hr/>
                <ul>
                    <li><a>我的作品</a></li>
                    <li><a href="/profile">账号设置</a></li>
                    <li><a>帮助中心</a></li>
                    <li><a href="/signout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="index-container">
        <div class="index-left">
            <div class="test-menu"></div>
        </div>
        <div class="index-right">
            <div class="container">

                <button id="btn-test">click me</button>
            </div>
        </div>
    </div>

    <div class="con-dialog hide">
        <div class="comment-panel">
            <div class="header">
                <span><strong>评论</strong></span>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="body">
                <div class="triangle"></div>
                <span>@<span class="at-user"></span></span>
                <input type="hidden" id="at-tid">
                <input type="hidden" id="at-type">
                <input type="hidden" id="at-rid">
                <input type="hidden" id="at-uid">

                <div id="txtComment" name="note" class="input-adaptive" contenteditable="true"
                     placeholder="Enter键发送/Shift+Enter换行"></div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="/public/javascripts/pin/jquery.pin.min.js"></script>
<script>
    $(document).ready(function () {
        $('.img-user').click(function () {
            $('.user-dialog').toggleClass('hide');
        })
    });
</script>
</body>
</html>